<%--
  Created by IntelliJ IDEA.
  User: haol
  Date: 2017/8/31
  Time: 16:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<base href="<%=basePath%>">
<html lang="zn-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="format-detection" content="telephone=no"/>
    <title>确认支付</title>
    <link rel="stylesheet" href="css/base.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/base.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript" src="js/sha256.js"></script>
    <script type="text/javascript" src="js/sig.js"></script>
    <script type="text/javascript" src="js/handle.js"></script>
    <script type="text/javascript" src="js/mall_lhx.js"></script>

    <link rel="stylesheet" type="text/css" href="js/mobile-select-area/mobile-select-area.css">
    <script type="text/javascript" src="js/mobile-select-area/dialog.js"></script>
    <script type="text/javascript" src="js/mobile-select-area/mobile-select-area.js"></script>
    <script type="text/javascript" src="js/mobile-select-area/city.js"></script>
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
</head>
<body class="ed" style="position:relative";overflow:auto>
<div class="wrap">
    <div class="noaddress address_area none">
        <span class="addAddress">请点击添加收货地址</span>
        <img src="img/add_grey.png"></div>
    <div class="address_area has_address ">
        <h3>
            <span id="address_name"></span>
            <span id="address_tel"></span>
        </h3>
        <p><i></i>
            <span id="address_address"></span>
        </p> <b class='more_arr'></b>
    </div>
    <div class="order_detail">
        <img src="" id="orderProductPic">
        <p><i id="orderProductTitle"></i>
        </p>
        <span id="orderProducPrice"></span>
    </div>
    <p class="orderBtn" id="orderBtn">确认支付</p>
</div>
<div class="mask_layer none"></div>
<div class="mask_layer2 none"style="position:absolute;overflow:auto;min-height:100%;height:auto;">
    <div class="fillin_wrap">
        <i class="maskclose_btn"></i>
        <div class="fillin">
            <p><b>姓名</b>
                <input type="text" placeholder="请输入姓名" id="enterName" maxlength="20"></p>
            <p>
                <b>电话</b>
                <input type="tel" placeholder="请输入电话号码" id="enterTel" maxlength="11"></p>

            <p class="select_area">
                <span class="area_text" id="enterArea">请选择区域</span>
                <i class='more_arr'></i>
            </p>
            <p class="concrete_address">

                <textarea placeholder="请填写详细地址" id="enterAddress" maxlength="100"></textarea>
            </p>
        </div>
        <p class="tips-error none"></p>
        <div class="saveBtn" id="saveBtn">保存</div>
    </div>
</div>

<div class="loading" style="display:none">
    <img src="img/loading.gif"></div>
<div class="toast toast_timeout" style="display:none">网络异常，请稍后重试！</div>
<div class="toast toast_error" style="display:none">信息输入有误</div>
<script type="text/javascript">
    var token = "${token}";
    var infoResult = ${infoResult};
    var addrResult = ${addrResult};
    var productId = getUrlParam("id");
    var lastUpDateTime = "";
    $(function () {
             // 注入配置微信jssdk的参数
            wx.config({
             	debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端开，参数信息会通过log打出，仅在pc端时才会打印。
             	appId: "${wxconfig.appid}", // 必填，公众号的唯一标识
             	timestamp:"${wxconfig.timestamp}", // 必填，生成签名的时间戳
             	nonceStr: "${wxconfig.noncestr}", // 必填，生成签名的随机串
             	signature: "${wxconfig.signature}", //必填，签名，见附录1
             	jsApiList: ['chooseWXPay'
             	] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
             });

             // 微信参数配置完成后
             wx.ready(function(){
             	 // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。

             	$("#orderBtn").on('click',submitBtnEvent);
             	//alert(JSON.stringify(r));
             });
             // 微信参数配置错误后
             wx.error(function(res){
             	  // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开conig的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
             	alert_LHX({
             		hasBtn: 0,
             		msg: "未获取到信息，请退出再重新进入页面！"
             	});
             });
        // 载入商品信息
        drawOrderProduct(infoResult);
        // 载入地址信息
        drawOrderAdress(addrResult);


    });
</script>
<script type="text/javascript">

    $(function () {
        $(".maskclose_btn").click(function (e) {
            $(".mask_layer2").addClass('none');
            $(".tips-error").html("").addClass('none');

        });
        $(".noaddress").click(function (e) {
            $(".mask_layer2,.fillin_wrap").removeClass('none');
        });
        $(".has_address").click(function (e) {
            $(".mask_layer2,.fillin_wrap").removeClass('none');
            $("#enterName").val($("#address_name").html());
            $("#enterTel").val($("#address_tel").attr("data-tel"));
        });

        var selectArea = new MobileSelectArea();
        selectArea.init({
            trigger: '.select_area',
            data: json.data,
            position: "bottom",
            callback: function (scroller, text, value) {
                var area = text[0] + " " + text[1] + " " + text[2];
                $(".area_text").html(area).addClass('hasSelect');
            }
        });
        // 防止安卓手机键盘遮挡输入法
            $("#enterAddress").on('focus', function() {
                 $('.mask_layer2').scrollTop(parseInt($(".fillin_wrap").css("marginTop"))+$(".fillin_wrap").height());
            });

        $("#saveBtn").click(function (e) {
            var val_name = $("#enterName").val().replace(/\s+/, ''),
                val_tel = $("#enterTel").val().replace(/\D/, ''),

                area_hasSelect = $(".area_text").hasClass('hasSelect'),
                val_area = $(".area_text").html(),
                val_address = $("#enterAddress").val().replace(/\s+/, '');

                console.log(area_hasSelect);
            if (!val_tel || !val_tel || !val_area || !area_hasSelect || !val_address) {
                $(".tips-error").removeClass('none').html("请输入完整的信息");
                return;
            }

            if (strlen(val_name) > 20) {
                $(".tips-error").removeClass('none').html("请输入1~10个中文或英文！");
                return;
            }
            if (val_tel.length != 11) {
                $(".tips-error").removeClass('none').html("请输入11位手机号码！");
                return;
            }
            if (strlen(val_address) >= 200) {
//                var a = "地址长度不合法";
                $(".tips-error").removeClass('none').html("请输入1~100个字以内地址！");
                return;
            }
//            if (!(/^1[34578]\d{9}$/.test(val_tel))&&!(/^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/.test(val_tel))){
//                $(".tips-error").removeClass('none').html("电话格式不正确");
//                return;
//            }
            var regExp = /^[\u4e00-\u9fa5-Za-z]+$/;
            var regExp2 = /^[0-9]*$/;
            if (!regExp.test(val_name)) {
                $(".tips-error").removeClass('none').html("请输入中文或英文的姓名");
                return;
            }
            if (!regExp2.test(val_tel)) {
                $(".tips-error").removeClass('none').html("请输入有效的电话号码");
                return;
            }

            var addrArray = val_area.split(" ");
            saveAddress(val_name, val_tel, addrArray[0], addrArray[1], addrArray[2], val_address, function () {
                var tel_format = val_tel.substring(0, 3) + "****" + val_tel.substring(val_tel.length - 4);
                $("#address_name").html(val_name);
                $("#address_tel").attr("data-tel", val_tel).html(tel_format);
                $("#address_address").html(val_area + " " + val_address);

                $(".noaddress,.mask_layer,.mask_layer2").addClass('none');
                $(".has_address").removeClass('none');
            });
        });

    })

    function submitBtnEvent(e) {

        var address = $("#address_address").html().replace(/\s+/, ''),
            tel = $("#address_tel").attr("data-tel"),
            name = $("#address_name").html();

        if (!address || !tel || !name) {
            errorToast("请填写地址信息", 3);
            return;
        }

        submitOrder(productId, name, address, tel, lastUpDateTime);
    }
</script>
</body>
</html>
